<template>
  <div class="body">
    <div class="loginContent">
      <div class="head">欢迎使用</div>
      <div class="title">系统登录</div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleFormId"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div class="inputContent">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="ruleForm.userName">
              <img
                src="../../public/image/user.png"
                class="leadLogo"
                slot="prefix"
              />
            </el-input>
          </el-form-item>
          <el-form-item label="密码" prop="passWord">
            <el-input type="passWord" v-model="ruleForm.passWord">
              <img
                src="../../public/image/passWord.png"
                class="leadLogo"
                slot="prefix"
              />
            </el-input>
          </el-form-item>
        </div>
      </el-form>
      <!-- 登录 -->
      <button @click="login" class="button">登录</button>
    </div>
    <div class="rectangle1">
      <div class="text1">双线质量管控体</div>
      <div class="text2">力求每件产品、每个细节都尽善尽美</div>
      <div class="text3">够专业 才放心</div>
    </div>
    <div class="rectangle2"></div>
  </div>
</template>

<script>
import md5 from "js-md5";

export default {
  data: function () {
    return {
      ruleForm: {
        userName: "",
        passWord: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        passWord: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  props: {
    msg: String,
  },

  methods: {
    login() {
      console.log(this.$refs.ruleFormId);
      this.$refs.ruleFormId.validate((valid) => {
        if (valid) {
          this.$http({
            url: "/login",
            method: "POST",
            data: {
              userName: this.ruleForm.userName,
              passWord: md5(this.ruleForm.passWord),
              platform: "admin",
            },
          }).then((res) => {
            if (!res.errorMsg) {
              localStorage.setItem("avatar", res.img);
              localStorage.setItem("token", res.token);
              localStorage.setItem("user", JSON.stringify(res));
              localStorage.setItem("userName", this.ruleForm.userName);
              this.$router.push("/index");
              this.$message({
                type: "success",
                message: "登录成功!",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
html {
  margin: 0;
  padding: 0;
}

.body {
  margin: -8px;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../../public/image/background.png);
}

.body .loginContent {
  position: absolute;
  right: 10%;
  width: 360px;
  height: 360px;
  border-radius: 20px;
  opacity: 90%;
  background-color: #efeff0;
}

.body .loginContent .head {
  color: #000;
  font-size: 13px;
  width: 52px;
  height: 16px;
  margin-top: 23px;
  margin-left: 32px;
}

.body .loginContent .title {
  width: 110px;
  height: 34px;
  margin-top: 6px;
  margin-left: 32px;
  color: #4e4e4e;
  font-size: 27px;
  font-weight: 700;
}

.inputContent {
  height: 120px;
  margin-top: 40px;
  margin-right: 27px;
  margin-left: -10px;
}

.leadLogo {
  display: inline-block;
  width: 12px;
  height: 14px;
  margin-left: 10px;
  margin-top: 12px;
}

.button {
  border: 0;
  width: 302px;
  height: 38px;
  background: #409eff;
  border-radius: 19px 19px 19px 19px;
  opacity: 1;
  margin-top: 40px;
  margin-left: 28px;
}

.rectangle1 {
  position: absolute;
  top: 26%;
  left: 85px;
  width: 118px;
  height: 160px;
  background-image: url("../../public/image/rectangle.png");
}

.rectangle2 {
  position: absolute;
  top: 47%;
  left: 157px;
  width: 118px;
  height: 160px;
  background-image: url("../../public/image/rectangle.png");
}

.text1 {
  margin-top: 58px;
  margin-left: -5px;
  text-align: center;
  width: 126px;
  height: 23px;
  font-size: 18px;
  font-weight: 700;
  color: #fefefe;
}

.text2 {
  margin-left: -29px;
  margin-top: 43px;
  width: 256px;
  height: 20px;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  line-height: 0px;
}

.text3 {
  margin-left: 48px;
  width: 194px;
  height: 35px;
  font-size: 28px;
  font-weight: 700;
  color: #6bb9da;
  line-height: 0px;
}
</style>